<template>
    <el-dialog v-model="dialogModel" title="综合素质发起" width="50%" top="3vh">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h6 :id="titleId" :class="titleClass">综合素质评价发起</h6>
            </div>
        </template>
        <el-descriptions title="" border :column="2">
            <el-descriptions-item label="姓名">{{ props.detail?.assessUserVO?.realName }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ props.detail?.assessUserVO?.postName }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ props.detail?.assessUserVO?.deptName }}</el-descriptions-item>
            <el-descriptions-item label="密级">{{ props.detail?.assessUserVO?.securityName }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="综合素质评估项" border style="margin-top: 15px;">
            <el-descriptions-item>
                <el-table :data="props.detail?.assessItemVOs">
                    <el-table-column type="index" width="80" label="序号" />
                    <el-table-column prop="name" label="综合素质评价项" />
                    <el-table-column label="满足" width="160">
                        <template #default="{ row }">
                            <el-radio-group v-model="row.satisfy">
                                <el-radio :label="true"><span style="display: none;">1</span></el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column label="不满足" width="160">
                        <template #default="{ row }">
                            <el-radio-group v-model="row.satisfy">
                                <el-radio :label="false">
                                    <span style="display: none;">1</span>
                                </el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="总体评价" border style="margin-top: 15px;">
            <el-descriptions-item>
                <el-input v-model="formInfo.assessText" style="width: 100%" :rows="4" type="textarea" placeholder="" />
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="评价结论" border style="margin-top: 15px;" :column="1">
            <el-descriptions-item>
                <el-radio-group v-model="formInfo.assessResult">
                    <el-radio label="优秀">优秀</el-radio>
                    <el-radio label="称职">称职</el-radio>
                    <el-radio label="基本称职">基本称职</el-radio>
                    <el-radio label="不本称职">不本称职</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="部门评价人">
                <el-select v-model="deptuser" filterable placeholder="请选择评价人" style="width: 240px">
                    <el-option v-for="item in options" :key="item.id" :label="item.realName" :value="item.id" />
                </el-select>
            </el-descriptions-item> -->
        </el-descriptions>
        <el-descriptions title="" border style="margin-top: 15px;">
        </el-descriptions>
        <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
            <el-button type="primary" @click="handlerSubmit">提交</el-button>
            <el-button type="primary" @click="handlerSave" style="margin-left: 50px;">保存</el-button>
            <el-button type="primary" @click="handlerCancal" style="margin-left: 50px;">取消</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { ElNotification, ElDescriptions, ElDescriptionsItem, ElRadioGroup, ElRadio } from 'element-plus';
import { getList } from '@/api/system/user'
import { getAssessItem, subjectiveResultStart, getDetail, submit_subjectiveResultStart,save_subjectiveResultStart } from '@/api/position/positionAssessResultSubjective';
import Userinfo from '@/views/system/userinfo.vue';

const props = defineProps({
    detail: {},
    type: '',
});
const dialogModel = ref(false);
const deptuser = ref(null);
const options = ref([]);
const testsss = ref('')
const formInfo = ref({
    assessText: "",
    assessResult: "",
    satisfy: 1
})
const radio = ref(3)

watch(() => props.detail.id, () => {
    if (!props.detail?.id) {
        return
    }
    formInfo.value.assessText = props.detail?.assessText || "";
    formInfo.value.assessResult = props.detail?.assessResult || "";
}, {
    immediate: true
});
defineExpose({
    open() {
        dialogModel.value = true;
    }
});

async function handlerSubmit() {
    if (formInfo.value.assessText.length == 0) {
        ElNotification({
            title: '提示',
            type: 'warning',
            message: h('i', { style: 'color: teal' }, '请填写总体评价'),
        })
        return;
    }
    if (formInfo.value.assessResult.length == 0) {
        ElNotification({
            title: '提示',
            type: 'warning',
            message: h('i', { style: 'color: teal' }, '请选择评价结论'),
        })
        return;
    }
    let userInfo = JSON.parse(localStorage.getItem('id-userInfo') || {});
    console.log(userInfo);
    let data = {
        "id": props.detail.id,
        "assessType": props.detail.assessType,                        //评价类型（department=部门，teacher=师傅，product=型号）
        "positionAssessResultId": props.detail.positionAssessResultId,   //考核任务id
        "assessUserId": userInfo.content.user_id,             //评价人id
        "assessItemVOs": props.detail.assessItemVOs,
        "assessText": formInfo.value.assessText,  //总体评价
        "assessResult": formInfo.value.assessResult, //评价结论
    }
    {
        let res = await submit_subjectiveResultStart(data)
        if (res.data.success) {
            ElNotification({
                title: '提示',
                type: 'warning',
                message: h('i', { style: 'color: teal' }, '提交成功'),
            })
            dialogModel.value = false;
        } else {
            ElNotification({
                title: '提示',
                type: 'warning',
                message: h('i', { style: 'color: teal' }, '提交失败'),
            })
        }
    }
}
async function handlerSave() {
    if (formInfo.value.assessText.length == 0) {
        ElNotification({
            title: '提示',
            type: 'warning',
            message: h('i', { style: 'color: teal' }, '请填写总体评价'),
        })
        return;
    }
    if (formInfo.value.assessResult.length == 0) {
        ElNotification({
            title: '提示',
            type: 'warning',
            message: h('i', { style: 'color: teal' }, '请选择评价结论'),
        })
        return;
    }
    let userInfo = JSON.parse(localStorage.getItem('id-userInfo') || {});
    let data = {
        "id": props.detail.id,
        "assessType": props.detail.assessType,                        //评价类型（department=部门，teacher=师傅，product=型号）
        "positionAssessResultId": props.detail.positionAssessResultId,   //考核任务id
        "assessUserId": userInfo.content.user_id,             //评价人id
        "assessItemVOs": props.detail.assessItemVOs,
        "assessText": formInfo.value.assessText,  //总体评价
        "assessResult": formInfo.value.assessResult, //评价结论
    }
    {
        let res = await save_subjectiveResultStart(data)
        if (res.data.success) {
            ElNotification({
                title: '提示',
                type: 'warning',
                message: h('i', { style: 'color: teal' }, '保存成功'),
            })
            dialogModel.value = false;
        } else {
            ElNotification({
                title: '提示',
                type: 'warning',
                message: h('i', { style: 'color: teal' }, '保存失败'),
            })
        }
    }
}
function handlerCancal(params) {
    dialogModel.value = false;
}
</script>
<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 38px;
}

.info-box {
    font-size: 14px;
    margin-bottom: 4px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mt-4 {
    margin-top: 16px;
}
</style>